<template>
  <div class="record-warrp">
      <div class="record-left">
         <div class="record-img">
            <img src="" alt="">
            <h3>江玮</h3>
            <hr/>
            东海市

            <p style="writing-mode: vertical-rl;
                      font-size: 20px;
                      margin-top:30px;">当前材料:</p>
             
             <p style="writing-mode: vertical-rl;
                      font-size: 20px;
                      color:red;
                      margin-top:5px;
                      height: 200px;
                      ">1999年制干部履历表</p>
            
         </div>
      </div>
      <div class="record-center">
        <el-row :gutter="10">
      <el-col :span="6">
        <el-row style="position: relative">
          <el-col
            :span="25"
            style="overflow: auto; width: 100%; background-color: #fff"
            :style="{ height: heightTree }"
          >
            <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
            >
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>导航一</span>
                </template>
                  <el-menu-item index="1-3">选项3</el-menu-item>
              </el-submenu>
              <el-menu-item index="2">
                <i class="el-icon-menu"></i>
                <span slot="title">导航二</span>
              </el-menu-item>
              <el-menu-item index="3">
                <i class="el-icon-document"></i>
                <span slot="title">导航三</span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">导航四</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="18">
        <div class="thumbnail" :style="{ height: heightY }">
            <img
              v-for="(image, index) in images"
              :key="index"
              :src="image.src"
              :style="{ width: '140px', height: '200px', border: index === selectedImageIndex ? '2px solid red' : '' }"
              @click="selectImage(index)"
            >
          </div>
          <div class="bigPicture" :style="{ height: heightY }"> 
            <img :src="selectedImageIndex !== null ? images[selectedImageIndex].src : ''" alt="" style="width: 100%; height: 100%;">
          </div>
      </el-col>
    </el-row>
      </div>
      <div class="record-rigth">
          <button class="buttonOne">全屏</button>
          <button class="buttonOne">上一页</button>
          <button class="buttonOne">下一页</button>
      </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      heightY: window.innerHeight - 145 + "px",
      heightTree: window.innerHeight - 140 + "px",
      tabPosition:"left",
      images:[
        {
          src:'https://img2.baidu.com/it/u=870159714,3719145608&fm=253&fmt=auto&app=138&f=JPEG?w=351&h=500',
        },
        {
          src:'https://img2.baidu.com/it/u=1361506290,4036378790&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
        },{
          src:'https://img2.baidu.com/it/u=55994022,1030234355&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
        },{
          src:'https://img2.baidu.com/it/u=1330959003,1248282479&fm=253&fmt=auto&app=120&f=JPEG?w=450&h=780',
        },{
          src:'https://img0.baidu.com/it/u=1886047342,1826501707&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500',
        },{
          src:'https://img2.baidu.com/it/u=1368879157,3680317647&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
        },{
          src:'https://img0.baidu.com/it/u=1880899726,3824907986&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
        },{
          src:'https://img1.baidu.com/it/u=1582055235,2869528729&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=716',
        },
      ],
      selectedImageIndex: 0,
    };
  },
  methods: {
    selectChange() {},
    selectImage(index) {
    this.selectedImageIndex = index;
  }
  },
};
</script>

<style scoped lang="less">
.record-warrp{
display: flex;
width: 100%;
height: 100%;

.record-left{
   width: 400px;
   height: 100%;
}
.record-img{
  width: 200px;
  height: 120px;
  border: 1px solid #ccc;
  border-radius: 10px;
}
.record-center{
   width: 1200px;
   height: 100%;
}
.record-rigth{
   width: 400px;
   height: 100%;
   margin-top:300px;
}
}

.el-menu-item{
  margin-top:5px;
}
.thumbnail{
  width: 150px;
  overflow-y: scroll;
  float: left;
}
.bigPicture{
  float: left;
  width: 500px;
}


.buttonOne{
  background: #009AE8;
  width: 80px;
  height:50px;
  border-radius: 10px;
  border: 1px solid #ccc;
  color: #fff;
  display: grid;
  line-height: 50px;
  text-align: center;
  margin-left: 170px;
  margin-top:5px;
}

</style>


